import React, { useEffect, useState } from 'react';
import { connect } from 'umi';
import { Select, Button } from 'antd';
import styles from './index.less';
import { useDebounceFn } from 'ahooks';

let isFirst = false;

export const Operate = (props) => {
  const [unitList, setUnitList] = useState([]),
    [province, setProvince] = useState(),
    [market, setMarket] = useState(),
    [unit, setUnit] = useState(props.unitId),
    { onSearch } = props;

  const onRegionChange = (val) => {
    setProvince(props.marketList.find((i) => i.value === val)?.provinceId);
    setMarket(val);
    if (!props.marketList.length) return;
    const list = props.marketList.find((i) => i.value === val)?.children || [];
    setUnitList(list);
  };

  useEffect(() => {
    if (!unitList.length) return;
    setUnit(unitList[0].value);
  }, [unitList]);

  useEffect(() => {
    if (!props.marketId || typeof props.marketId !== 'string') return;
    onRegionChange(props.marketId);
    isFirst = true;
  }, [props.marketId, props.marketList]);

  //初次默认查询
  useEffect(() => {
    if (isFirst) {
      query();
    }
  }, [unit]);

  // 查询
  const query = () => {
    if (!unit) {
      return;
    } else {
      isFirst = false;
      props.setProvinceId(province);
      props.setMarketId(market);
      props.setUnitId(unit);
      onSearch();
    }
  };
  const _onReset = useDebounceFn(
    () => {
      // if (props.unit !== unit) {
      isFirst = true;
      // }
      onRegionChange(props.marketList[0].value);
      onSearch();
    },
    { wait: 500 },
  );
  return (
    <div className={styles.Operate}>
      <div className={styles.condition}>
        <Select
          className={styles.provinceSelect}
          value={market}
          onChange={onRegionChange}
          showSearch
          options={props.marketList.map((t) => ({ label: t.label, value: t.value }))}
          filterOption={(input, option) => {
            return (option?.label).toLowerCase().includes(input.toLowerCase());
          }}
        />
        <Select
          className={styles.seqSelect}
          value={unit}
          onChange={setUnit}
          showSearch
          placeholder="请选择交易单元"
          options={unitList}
          filterOption={(input, option) =>
            option?.label.toLowerCase().includes(input.toLowerCase())
          }
        />
        <Button className={styles.queryBtn} type="primary" onClick={query}>
          查询
        </Button>
        <Button className={styles.reset} htmlType="reset" onClick={_onReset.run} ghost>
          重置
        </Button>
      </div>
    </div>
  );
};

const mapStateToProps = ({ mediumAndLongTermMarket }) => ({
  marketList: mediumAndLongTermMarket.marketList,
  marketId: mediumAndLongTermMarket.marketId,
  provinceId: mediumAndLongTermMarket.provinceId,
});

const mapDispatchToProps = (dispatch) => ({
  setProvinceId: (payload) =>
    dispatch({
      type: 'mediumAndLongTermMarket/setProvinceId',
      payload,
    }),
  setMarketId: (payload) =>
    dispatch({
      type: 'mediumAndLongTermMarket/setMarketId',
      payload,
    }),
});

export default connect(mapStateToProps, mapDispatchToProps)(Operate);
